<template>
    <div class="main">
        <div class="form_content">
            <NScrollbar>
                <NSpin :show="spinShow">
                    <div class="content">
                        <VDisOrEnd v-if="RecordType.OnBusinessRouteName" :id="dispatchInfo.workflowInfoVo?.fromId"
                            :assigneeFlag="dispatchInfo.workflowInfoVo?.assigneeFlag" title="出差申请单"></VDisOrEnd>
                        <div class="topTitle" v-else>
                            出差详情
                        </div>
                        <div class="basin-info">
                            <div class="basin-left">
                                <div class="box">
                                    <span>申请人部门：</span>
                                    <span>{{ dispatchInfo.deptName }}</span>
                                </div>
                                <div class="box">
                                    <span>申请时间：</span>
                                    <span>{{ dispatchInfo.submitTime }}</span>
                                </div>
                                <div class="box">
                                    <span>出发时间：</span>
                                    <span>{{ dispatchInfo.departureTime }}</span>
                                </div>
                                <div class="box">
                                    <span>出差地点：</span>
                                    <span>{{ renderTrips(dispatchInfo.errandTripList) }}</span>
                                </div>
                                <div class="box">
                                    <span>交通工具：</span>
                                    <span>{{ dispatchInfo.travelMode }}</span>
                                </div>
                                <div class="box">
                                    <div style="margin-bottom: auto;">
                                        <span>出差事由：</span>
                                    </div>
                                    <span>{{ dispatchInfo.reasons }}</span>
                                </div>
                                <div class="box" v-if="dispatchInfo.fileList?.length">
                                    <div style="margin-bottom: auto;">
                                        <span>附件：</span>
                                    </div>
                                    <div style="display: flex;flex-wrap: wrap;gap: 15px 0;">
                                        <VAttachments :attach-list="dispatchInfo.fileList"></VAttachments>
                                    </div>
                                </div>
                            </div>
                            <div class="basin-right">
                                <div class="box">
                                    <span>申请人：</span>
                                    <span>{{ dispatchInfo.userName }}</span>
                                </div>
                                <div class="box">
                                    <span>是否省内：</span>
                                    <span>{{ dispatchInfo.provinceFlag ? '否' : '是' }}</span>
                                </div>
                                <div class="box">
                                    <span>返回时间：</span>
                                    <span>{{ dispatchInfo.returnTime }}</span>
                                </div>
                                <div class="box">
                                    <span>出差天数：</span>
                                    <span>{{ dispatchInfo.errandDay }}天</span>
                                </div>
                                <div class="box">
                                    <span>同伴：</span>
                                    <span>{{ dispatchInfo.partnerName }}</span>
                                </div>
                                <div class="box"
                                    v-if="dispatchInfo.submitUser != dispatchInfo.userName && dispatchInfo.submitUser">
                                    <span>实际申请人：</span>
                                    <span>{{ dispatchInfo.submitUser }}</span>
                                </div>
                                <div class="box" v-if="dispatchInfo.primitiveId">
                                    <span>原申请连接：</span>
                                    <NButton type="primary" ghost style="width: 115px;"
                                        @click="$router.push({ path: '/OA/Onbusiness/MineApplicationDetail', query: { id: dispatchInfo.primitiveId } })">
                                        跳转原申请
                                    </NButton>
                                </div>
                            </div>
                        </div>
                        <div class="topTitle">审批信息</div>
                        <div class="approve">
                            <div class="box">
                                <span>审批状态</span>
                                <span style="font-size: 20rem;">{{ dispatchInfo.workflowInfoVo?.status }}</span>
                            </div>
                            <div class="box">
                                <span>审批流程</span>
                                <div style="color: #5fb17f;font-size: 20rem;font-weight: 500;display: flex;">
                                    <div v-for="(item, index) in dispatchInfo.workflowInfoVo?.workflowList" :key="index">
                                        <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                                            {{ item.key }}</span>
                                        <span v-if="index != dispatchInfo.workflowInfoVo?.workflowList.length - 1">→</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topTitle">审批记录</div>
                        <div class="table">
                            <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped
                                :rowKey="rowKey" />
                        </div>
                    </div>
                </NSpin>
            </NScrollbar>
        </div>
    </div>
    <FixedAction>
        <NSpace justify="start">
            <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
                <template #icon>
                    <img :src="VBackImg" style="width: 25rem; height: 25rem" />
                </template>
                返回
            </NButton>
        </NSpace>
    </FixedAction>
</template>

<script setup lang="ts">
import { NScrollbar, NDataTable, useMessage, NSpin, NButton, NSpace } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { sendRequest } from '@/utils/api'
import VAttachments from '@/views/OA/Common/Attachments.vue'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import FixedAction from '@/components/FixedAction.vue'
import VBackImg from '@/assets/images/back.png'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import { RecordType } from '@/router/utils'

// const props = defineProps({
//     id: String
// })
const route = useRoute()
const message = useMessage()
const tags = useTagStore().tags

const rowKey: any = (row: any) => row.id || ''
const columns: DataTableColumns = [
    {
        title: '类型',
        key: 'type',
        width: 50
    },
    {
        title: '人员',
        key: 'userName',
        width: 50
    },
    {
        title: '时间',
        key: 'time',
        width: 100
    },
    {
        title: '结果',
        key: 'result',
        width: 50
    },
    {
        title: '备注',
        key: 'remark',
        width: 150
    }
]

//处理出差地点数据
const renderTrips = (val: any) => {
    const tmp: any = []
    val?.map((i: any) => {
        tmp.push([i.departureLocation + '至' + i.destination])
    })
    return tmp.toString()
}
// 返回
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}
// 获取详情
const spinShow: any = ref(false)
const dispatchInfo = ref<any>({})
const tableData: any = ref([])
const getInfo = async () => {
    spinShow.value = true
    const [error, res] = await sendRequest({
        module: 'application',
        api: 'applicationItem',
        uri: {
            id: route.query.id as never
        }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    dispatchInfo.value = res.data
    tableData.value = res.data?.workflowInfoVo?.approvalRecordsList || []
    spinShow.value = false
}

watch(
    () => route,
    async () => {
        if (
            (route.path == '/OA/Onbusiness/MineApplicationDetail') &&
            route.query.id
        ) {
            await getInfo()
        }
    },
    { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
    font-size: 18rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .form_content {
        width: 100%;
        height: 100%;
        padding: 20rem 20rem 0;

        .topTitle {
            font-size: 22px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #5fb17f;
            margin-bottom: 10rem;
        }

        .content {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 18rem 33rem 120rem;
            overflow-y: scroll;
            background-color: #ebeceb;
            @include CommonFont;

            .basin-info {
                display: flex;
                width: 100%;
                height: auto;
                border-bottom: 1px dashed #bc9e70;
                margin-bottom: 10rem;

                .basin-left {
                    flex: 0 0 40%;
                }

                .box {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rem;
                    font-size: 16rem;

                    span:first-child {
                        display: inline-block;
                        width: 120rem;
                        font-weight: bold;
                        color: #333333;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                    }

                    span:last-child {
                        display: inline-block;
                        flex: 1;
                        color: #55524f;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                    }
                }

                .box:last-child {
                    margin-bottom: 20rem;
                }
            }

            .approve {
                display: flex;
                width: 100%;
                margin-bottom: 20rem;
                border-bottom: 1px dashed #bc9e70;

                .box {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    min-width: 100rem;
                    width: auto;
                    height: 90rem;
                    border-radius: 4px;
                    border: 1px solid #d9d9d9;
                    padding: 12rem;
                    margin-right: 10rem;
                    margin-bottom: 20rem;

                    span:first-child {
                        font-size: 16rem;
                    }

                    span:last-child {
                        font-weight: 500;
                        color: #5fb17f;
                    }
                }
            }

            .table {
                width: 80%;
                background-color: #e1e1e1;
            }
        }
    }
}

.content::-webkit-scrollbar {
    display: none;
}

:deep(.n-spin-container) {
    width: 100%;
    height: 100%;
}

:deep(.n-scrollbar-container) {
    width: 100%;
    height: 100%;
}

:deep(.n-scrollbar-content) {
    width: 100%;
    height: 100%;
}

:deep(.n-spin-content) {
    width: 100%;
    height: 100%;
}
</style>